<template>
	<view class="pageContain" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
		<!-- 背景图 -->
		<BgImage />
		<!-- logo显示 -->
		<NavBar leftType="text" letText="我的保单" />
		<!-- 保单基础信息 -->
		<PolicyItem :policyInfo="policyInfo" />
		<view class="mainContent" :class="{ 'slideUp': !isShow }">
			<!-- 保单解析 -->
			<view class="policyAnalysis">
				<view class="policyCard">
					<view class="cardTitle">一 保单功能</view>
					<zero-markdown-view :markdown="policyInfo.policyFunction" />
				</view>
				<view class="policyCard">
					<view class="cardTitle">二 保险金额</view>
					<zero-markdown-view :markdown="policyInfo.policyAmount" />
				</view>
				<view class="policyCard">
					<view class="cardTitle">三 保险期限</view>
					<zero-markdown-view :markdown="policyInfo.coveragePeriod" />
				</view>
				<view class="policyCard">
					<view class="cardTitle">四 保障范围</view>
					<zero-markdown-view :markdown="policyInfo.coverageScope" />
				</view>
				<view class="policyCard">
					<view class="cardTitle">五 责任免除（不赔付的情形）</view>
					<zero-markdown-view :markdown="policyInfo.exclusionClause" />
				</view>
				<view class="policyCard">
					<view class="cardTitle">六 现金价值</view>
					<zero-markdown-view :markdown="policyInfo.cashValueDetail" />
				</view>
				<view class="policyCard">
					<view class="cardTitle">七 注意事项</view>
					<zero-markdown-view :markdown="policyInfo.notes" />
				</view>
			</view>
		</view>
		<!-- 聊天框 -->
		<ChatMode :isMode="false" :chatListShow="chatListShow" />
	</view>
</template>

<script setup>
import { watch, ref, getCurrentInstance, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import PolicyItem from '../overview/PolicyItem.vue';
import { policyDetailsApi } from '../../utils/api';
const { proxy } = getCurrentInstance();
const isShow = ref(true); // 显示页面
const chatListShow = ref(false);
const policyInfo = ref({
	accountId: '', policyNo: '', policyName: '', insuranceCompany: '', insuranceAmount: 0,
	cashValue: 0, mortgageLoan: 0, policyFunction: '', policyAmount: '', coveragePeriod: '',
	coverageScope: '', exclusionClause: '', cashValueDetail: '', notes: ''
})

// 触摸相关状态
const touchStartY = ref(0);
const touchEndY = ref(0);

// 获取路由参数中的id
const policyId = ref('');

// 获取模态框的显示隐藏
watch(() => proxy.$store.state.chatPopupShow, (nv) => {
	isShow.value = nv ? false : true;
}, { immediate: true, deep: true });


onLoad((option) => {
	policyId.value = option.id;
	getData();
})

// 数据获取
const getData = async () => {
	let res = await proxy.$util.request(policyDetailsApi(policyId.value), null, 'GET');
	// 处理返回的数据
	if (res && res.data) {
		// 根据实际API返回结构更新policyInfo
		policyInfo.value = res.data;
	}
}

// 触摸开始
const handleTouchStart = (e) => {
	touchStartY.value = e.touches[0].clientY;
}

// 触摸结束
const handleTouchEnd = (e) => {
	touchEndY.value = e.changedTouches[0].clientY;
	const deltaY = touchStartY.value - touchEndY.value;

	// 滑动距离大于50px时才触发
	if (Math.abs(deltaY) > 50) {
		// 向上滑动，显示聊天框，向下滑动，隐藏聊天框
		chatListShow.value = deltaY > 0 ? true : false;
	}
}
</script>

<style lang='scss' scoped>
.pageContain {
	padding: 0;

	// 保单基础
	:deep(.policyItem) {
		margin: 0 32rpx;
	}

	.policyAnalysis {
		margin-top: 24rpx;
		padding: 24rpx 28rpx;
		border-radius: 24rpx 24rpx 0 0;
		background-color: rgba(#FFF, 0.67);

		// 用户信息卡片
		.policyCard {
			margin-bottom: 24rpx;
			padding: 28rpx 22rpx;
			border-radius: 34rpx;
			background-color: #FFF;

			.cardTitle {
				color: #2E1902;
				font-weight: 500;
			}

			.basicInfo {
				color: #494949;
			}

			.cardTag {
				color: #2E1902;
				font-weight: 500;
				position: relative;
				padding-left: 28rpx;
				margin: 18rpx 0 10rpx;

				&::before {
					top: 0;
					left: 0;
					bottom: 0;
					content: '';
					margin: auto;
					width: 16rpx;
					height: 16rpx;
					display: block;
					position: absolute;
					border-radius: 16rpx;
				}
			}

			.cardText {
				font-size: 24rpx;
				color: #797979;
				padding-left: 28rpx;
			}
		}
	}
}

// 主体内容动画
.mainContent {
	transition: transform 1s ease-out, opacity 1s ease-out;
	transform: translateY(0);
	opacity: 1;
}

.slideUp {
	transform: translateY(-100%);
	opacity: 0;
}
</style>
